<template>
    <div class="div-height-left">
        <el-card ref="card" class="box-card">
            <el-input v-model="filterText" placeholder="输入关键字进行过滤">
            </el-input>

            <el-tree ref="tree" :data="data" :expand-on-click-node="false" :filter-node-method="filterNode"
                :highlight-current=true :props="defaultProps" class="filter-tree" default-expand-all
                @node-click="nodeClick">
            </el-tree>
        </el-card>
    </div>
</template>

<script lang="ts" setup>
import { treeSelect } from '@/api/system/sysOrg'
const tree = ref()
const emits = defineEmits(['listOrgTree', 'treeClick'])
let filterText = ref('')
let data = ref([])
let defaultProps = ref({
    children: 'children',
    label: 'label'
})
// body高度
let bodyHeight = ref(document.body.clientHeight)
let style = ref({
    'overflow-y': 'auto',
    height: '800px'
})
watch(() => [filterText, bodyHeight], (newValue, _oldValue) => {
    tree.value.filter(newValue[0])
    style.value = {
        'overflow-y': 'auto',
        height: newValue[1] + 'px'
    }
}, { deep: true })

getListOrg()
/** 查询机构列表 */
function getListOrg() {
    treeSelect({ ' delFlag': '0', 'status': '0' }).then(res => {
        data.value = res.data
        emits('listOrgTree', res.data)
    })
}

function filterNode(value, data) {
    if (!value) return true
    return data.label.indexOf(value) !== -1
}
function nodeClick(a, _b, _c) {
    emits('treeClick', a)
}
</script>

<!-- < script lang = "ts" >
export default {
    name: "SysOrgTree"
}
</script> -->

<style scoped>
.box-card {
    overflow-y: auto
}

:deep(.is-always-shadow) {
    height: calc(100% - 20px);
}

:deep(.el-card__body) {
    height: 100%;
}
</style>
